<template>
	<view class="goods  clearfix">
		<image src="/static/class/back.png" class="block25 newback" @click="backs"></image>
		<template >
			<swipers :slides="banner" srcName="img" :indicatorDots="false" :height="620"></swipers>
			<view class="goods-info bg-white px15 py15">
				<view class="goods-price flex flex-align-center" >
					<view class="text-prices f18  flex align-center" >
						<text v-if="status!=4">￥</text>
						<text>{{price}}</text>
						<text v-if="status==4">益豆</text>
					</view>
				</view>
				<view class="goods-name mt5">
					<text class="f18 text-black">{{ goodsname }}</text>
				</view>
				<view class="flex align-center justify-between text-info mt10 f12">
					<text>免费配送</text>
					<text>销量 : {{ sellnum }} 件</text>
				</view>
			</view>
			<view class="cu-list menu no-border change-spec bg-white mt5">
				<view class="cu-form-group cu-item arrow" @tap="showModal('skuModal')">
					<view class=" f14 fwb mw100">选择</view>
					<input class="f12 text-info wpguige" disabled placeholder="规格" name="goods_attr" v-model="specName" />
				</view>
			</view>
			<view class="goods-detail bg-white mt5">
				<view class="pt10 text--center wp100 discenter">
					<view class="goods-detail-title"><text class="color-black goods-detail-title__text">商品详情</text></view>
				</view>
				<view class="bg-white py10 wp100 ovh px15 mb60">
					<jyf-parser :html="xiangqing"  :domain="baseURL.domain"></jyf-parser>
				</view>
			</view>
		</template>
		<!-- tabbar -->
		<view class="cu-bar bg-white tabbar goods-fixed tabbar solid-top  shop">
			<view class="action color-info" @click="pushHome">
				<view class="w45 discenter">
					<view class="cuIcon-home"></view>
				</view>
				<view class="w45 discenter">首页</view>
			</view>
			<view class="action color-info" @click="tostore">
				<view class="w45 discenter">
					<view class="cuIcon-shop"></view>
				</view>
				<view class="w45 discenter">店铺</view>
			</view>
			<view class="action color-info" :class="{ 'color-danger': isFavorite }" @click="handlefavorite">
				<view class="w45 discenter">
					<view :class="[isFavorite ? 'cuIcon-likefill' : 'cuIcon-like']"></view>
				</view>
				<view class="w45 discenter">收藏</view>
			</view>
			<template >
				<view class="btn-group text-white" >
					<view class="py10 submit cart mcart" @tap="showModal('skuModal')">加入购物车</view>
					<view class="py10 submit buy mbuy" @tap="showModal('skuModal')">立即购买</view>
				</view>
			</template>
		</view>
		<!-- sku -->
		<view
			@touchmove.stop.prevent
			class="cu-modal border-width-1 bottom-modal sku-modal text--left"
			:class="modalName == 'skuModal' ? 'show' : ''"
			@tap="hideModal"
		>
			<view class="cu-dialog bg-white height-auto" @tap.stop>
				<view class="close cuIcon-close f20 color-info" @tap="hideModal"></view>
				<view class="product px15 py15 product--horizontal flex align-end justify-start">
					<view class=" ">
						<image lazy-load class="block100" v-if="banner" :src="guigepic"></image>
					</view>
					<view class="flex flex-direction align-start  ml10">
						<view class="f18 mb10 flex align-center" v-if="guigeid.length!=ggs.length">
							<text v-if="guigeid.length!=ggs.length">请选择规格</text>
						</view>
						<view class="text-prices f18 mb10 flex align-center" v-else>
							<text v-if="status!=4">￥</text>
							<text v-if="guigeid.length==ggs.length">{{jiage}}</text>
							<text v-if="status==4">益豆</text>
						</view>
						<text class="text-info f12 mb5">库存{{specstock}}件</text>
						<!-- <text class="text-black f12">{{specname}}</text> -->
					</view>
				</view>
				<scroll-view class="scroll-view height-auto" scroll-y>
					<view class="px15" v-if="ggs.length > 0">
						<view class="spec solid-bottom" v-for="(item,index) in ggs" :key="index">
							<view class="py15 flex align-center justify-start"><text class="color-content">{{item.name}}</text></view>
							<view class="mr-15 pb5 flex align-center justify-start flex-wrap">
								<button
									v-for="(shangpin, ids) in item.goods"
									:key="ids"
									class="cu-btn px20 mh50  mr15 mb10"
									:class="[shangpin.specactive == ids ? 'bg-pinks text-danger' : 'bg-gainsboro color-content']"
									@tap="changeSpec(index, ids,shangpin,item)"
								>
									<text class="f12">{{ shangpin.name }}</text>
								</button>
							</view>
						</view>
					</view>
					<view class="flex align-center justify-between px15   goods-nums">
						<text>数量</text>
						<uni-number-box @change="changeNum"  v-model="num" theme="noBorder" :min="1" :max="9999"></uni-number-box>
					</view>
				</scroll-view>
				<view class="cu-bar bg-white tabbar solid-top shop dingwei">
					<view class="action color-info" @click="pushHome">
						<view class="w45 discenter">
							<view class="cuIcon-home"></view>
						</view>
						<view class="w45 discenter">首页</view>
					</view>
					<view class="action color-info"  @click="tostore">
						<view class="w45 discenter">
							<view class="cuIcon-shop"></view>
						</view>
						<view class="w45 discenter">店铺</view>
					</view>
					<view class="action color-info"  :class="{ 'text-prices': isFavorite }" @click="handlefavorite">
						<view class="w45 discenter">
							<view :class="[isFavorite ? 'cuIcon-likefill' : 'cuIcon-like']"></view>
						</view>
						<view class="w45 discenter">收藏</view>
					</view>
					<!--非秒杀商品-->
					<view class="btn-group text-white">
						<view class="py10 submit cart mcart" @click="addCart">加入购物车</view>
						<view class="py10 submit buy mbuy" @click="buyNow">立即购买</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import jyfparser from '@/components/jyf-parser/jyf-parser.vue'
import uniNumberBox from '@/components/uni-number-box/uni-number-box.vue'
export default {
	components: {
		jyfparser,
		uniNumberBox
	},
	data() {
		return {
			block: false,
			goodstype:'',
			TabCur:0,
			status:0,
			id: '',
			isFavorite:false,
			xiangqing:'',
			goodsname:'',
			price:'',
			sellnum:'',
			banner:[],
			num:1,
			specstock:'',
			pics:'',
			shopId:'',
			goodsid:'',
			specName:'',
			guigepic:'',
			ggs:[],
			specprice:'',
			guigeid:[],
			jiage:0,
			oneCnyMoney:0
		}
	},
	computed: {
		...mapState(['baseURL'])
	},
	onLoad(e) {
		this.id=e.id
	},
	onShow() {
		this.getData()
	},
	onHide() {
		this.hideModal()
	},
	onBackPress() {
		this.hideModal()
	},
	methods: {
		...mapActions(['setStateEdit' ]),
		async getData() {
			let {
				data: {good:{desc,pic,isShoucang,id,money,name,num,guige,storeId,status,oneCnyMoney},vipZkBl }
			} = await this.$http.post('good.index', {goodId:this.id}, {tipConfig: { storeBlock: true } })
				this.xiangqing=desc
				this.banner=pic
				this.goodsname=name
				this.sellnum=num
				this.status=status
				//是否一元
				if(this.status==6){
					this.oneCnyMoney=oneCnyMoney
					this.price=oneCnyMoney
					this.jiage=oneCnyMoney
				}else{
					// if(this.status==3){
					// 	this.price=(money*vipZkBl*0.01).toFixed(2)
					// }else{
					// 	this.price=money
					// }
					this.price=money
					this.jiage=money
					
				}
				this.shopId=storeId
				if(isShoucang==1){
					this.isFavorite=true
				}else{
					this.isFavorite=false
				}
				this.getGuige()
				this.block=true
		},
		async getGuige() {
			let {
				data: {pic,ggs,kcNum}
			} = await this.$http.post('good.guige', {goodId:this.id}, {tipConfig: { storeBlock: true } })
			this.specstock=kcNum
			this.ggs=ggs.map(item => {
				item.goods = item.guige.map(shangpin => {
					return {...shangpin,specactive:-1} 
				})
				return {...item,specactive:-1,taocanid:-1,taocanprice:0} 
			})
			this.guigepic=pic
		},
		showModal(e) {
			this.modalName = e
		},
		hideModal(e) {
			this.modalName = null
		},
		hideSelloutModal() {
			clearTimeout(this.selloutTimes)
			this.hideModal()
			uni.navigateBack({
				delta: 1
			})
		},
		changeSpec(index, ids,shangpin,item) {
			//先取消选中
			this.ggs[index].goods.forEach((shangpin)=>{
				if(shangpin.specactive!=-1){
					shangpin.specactive=-1
				}
			})
			//赋值
			this.ggs[index].goods[ids].specactive=ids
			this.ggs[index].specactive=ids
			this.ggs[index].taocanprice=this.ggs[index].goods[ids].price
			this.ggs[index].taocanid=this.ggs[index].goods[ids].id
			//取选中的多个id
			let checkedids=[]
			this.ggs.forEach((item)=>{
				if(item.taocanid!=-1){
					checkedids.push(item.taocanid)
				}
			})
			this.guigeid=checkedids
			let guiges=this.guigeid.join(',')
			//比较计算价格
			var maxdata=this.ggs[0].taocanprice
			for(var n=1;n<this.ggs.length;n++){
			  if(this.ggs[n].taocanprice>maxdata){
			    maxdata=this.ggs[n].taocanprice;
			   }
			}
			this.specprice=maxdata
			this.jiage=(this.specprice*this.num).toFixed(2)
		},
		changeNum(e) {
			this.num = e
			if(this.status==6){
				this.jiage=this.oneCnyMoney*this.num
			}else{
				this.jiage=(this.specprice*this.num).toFixed(2)
			}
		},
		pushHome() {
			uni.switchTab({
				url: '/pages/home/index'
			})
		},
		async handlefavorite() {
			let { data } = await this.$http.post('good.collect', {goodsId:this.id}, { tipConfig: { storeLoading: true, isSuccessTip: true } })
			this.isFavorite = !this.isFavorite
		},
		validator() {
			
			
		}, 
		tostore(){
			if(this.shopId==0){
				uni.showToast({
					title:'该商品为平台商品',
					icon:'none'
				})
				return false
			}else{
				uni.navigateTo({
					url:'/pages/store/index?id='+this.shopId
				})
			}
		},
		async addCart() {
			if(this.num>this.specstock){
				uni.showToast({
					title:'库存不足',
					icon:'none'
				})
				return false
			}
			if(this.guigeid.length!=this.ggs.length){
				uni.showToast({
					title:'请选择规格',
					icon:'none'
				})
				return false
			}
			let{data}= await this.$http.post('good.addcart',{goodId:this.id,num:this.num,ggIds:this.guigeid.join(',')}, { tipConfig: { isSuccessTip: true } })	
		},
		backs(){
			uni.navigateBack({
				delta:1
			})
		},
		buyNow() {
			this.hideModal()
			if(this.num>this.specstock){
				uni.showToast({
					title:'库存不足',
					icon:'none'
				})
				return false
			}
			if(this.guigeid.length!=this.ggs.length){
				uni.showToast({
					title:'请选择规格',
					icon:'none'
				})
				return false
			}
			uni.navigateTo({
				url: '/pages/order/confirm?id='+this.id+'&type='+2+'&num='+this.num+'&guigeid='+this.guigeid.join(',')})
		},
		pushtab() {
			if(this.TabCur==0){
				return false
			}else{
				this.TabCur=0
			}
		},
		pushtabs() {
			if(this.TabCur==1){
				return false
			}else{
				this.TabCur=1
			}
		}
	}
}
</script>

<style lang="less">
.h550{
	height: 1300rpx;
}
.height-auto{
	height: auto;
}
.goods-nums{
	height: 70rpx;
	margin-top: 40rpx;
	margin-bottom: calc(50px + 40rpx);
}
.bb1s{
	border-bottom: 1rpx solid #ececec;
}
.blcok-live{
	width: 130rpx;
	height: 50rpx;
	background-image: linear-gradient(to top, #FE4725, #FF8463) !important;
	border-radius: 10rpx;
}
.nochoice{
	width: 108rpx;
	height: 4rpx;
	background-color: #FFFFFF;		
}
.dingwei{
	position: fixed;
	bottom: 0;
	width: 100%;
}
.wp50{
	width: 50%;
}
.sppic{
	width: 160rpx;
	height: 23rpx;
}
.wpguige{
	width: 500rpx;
	text-align: right;
}
.block68-9{
	width: 108rpx;
	height: 4rpx;
	background-color: #FF261B;
}
	.newback{
		position: fixed;
		top: calc(var(--status-bar-height) + 30rpx);
		left: 32rpx;
		z-index: 150;
	}
	.block10{
		width: 20rpx;
		height: 20rpx;
	}
	.w45{
		width:80rpx;
	}
	.h310{
		height: 620rpx;
	}
	.maxh-goods{
		max-height: 84rpx;
		overflow: hidden;
	}
	.bg-pinks{
		background-color: #FFD3D3 !important;
	}
.goods {

	&-detail {
		&-title {
			display: inline-block;
			position: relative;
			&__text::after,
			&__text::before,
			&::after,
			&::before {
				content: '';
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				display: block;
				width: 12upx;
				height: 12upx;
				border-radius: 50%;
			}
			&::after,
			&::before {
				background: #ff9933;
			}
			&__text::after,
			&__text::before {
				background: #3399ff;
			}
			&__text::before {
				left: -30upx;
			}
			&::before {
				left: -55upx;
			}
			&__text::after {
				right: -30upx;
			}
			&::after {
				right: -55upx;
			}
		}
	}

	.tabbar {
		.action {
			width: 90upx;
		}
		.cart {
			background-color: #ff9933;
			border-radius: 38upx 0 0 38upx;
		}
		.buy {
			background-color: #ff4546;
			border-radius: 0 38upx 38upx 0;
		}
		.coupon {
			background-color: #ff4546;
			border-radius: 38upx;
		}
	}
	.sku-modal {
		.close {
			position: absolute;
			right: 20upx;
			top: 20upx;
			z-index: 2000;
		}
	}
	.sellout-modal {
		.img {
			width: 750upx;
		}
	}
	.mh50{
		min-height: 80rpx !important;
	}
}
.goods-fixed{
	position: fixed;
	bottom: 0;
	z-index: 1;
	width: 100%;
}
.w45{
	width: 90rpx !important;
}
.mw100{
	min-width: 60rpx ;
}
.block100{
	width: 200rpx;
	height: 200rpx;
}
.mb60{
	margin-bottom: 120rpx;
}
.mcart{
	min-width:235rpx !important;
}
.mbuy{
	min-width:235rpx !important;	
}
</style>
